<template>
  <div class="preferential">
      <div class="preferential_head">
        <p>
            <img src="https://m.mwfile.cn/mm1015/image/20210521/140332_1fcf8815a7.jpg" alt="">
            <span>限时特惠</span>
        </p>
        <p>更多></p>
        <navigator url="/pages/detail/index?id=111">
            跳转详情页
        </navigator>
      </div>
      <div class="preferential_main">
          <dl v-for="(item,index) in List" :key="index">
              <dt>
                  <img :src="item.image" alt="">
              </dt>
              <dd>
                  <p>{{item.title}}</p>
                  <span>{{item.desc}}</span>
              </dd>
          </dl>
      </div>
  </div>
</template>

<script>
import {OperatList} from '../server/index';
export default {
    data() {
        return {
            List:[]
        }
    },
    async mounted(){
        let res = await OperatList({
            "cityId": 19,
            "mwAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqt1nY0hUNta9hRq21za9H6UYXmpdLdIF3rNSY-BJe8dSyjtwNeGpX-CQ8uF7Ta5STgOM6gTRMjsyKeRzn1THL1HmnqxwxOXKAeILznDd0kQk76KO8HwGuqOwEdLWC2o3hz62dBrm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
            "mAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqt1nY0hUNta9hRq21za9H6UYXmpdLdIF3rNSY-BJe8dSyjtwNeGpX-CQ8uF7Ta5STgOM6gTRMjsyKeRzn1THL1HmnqxwxOXKAeILznDd0kQk76KO8HwGuqOwEdLWC2o3hz62dBrm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
            "fromw": 1401
        })
        // console.log('特使优惠...',res)
        this.List = [...res.data[0].listData[0].items64[0],...res.data[0].listData[0].items64[1],...res.data[0].listData[1].items64[0],...res.data[0].listData[1].items64[1]];
        // console.log('******特惠了****',this.List)
    },
}
</script>

<style lang="scss" scoped>
.preferential{
    width: 100%;
    .preferential_head{
        width: 97%;
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        margin: 0 auto;
        p{
            display: flex;
            align-items: center;
            img{
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
    }
    .preferential_main{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        dl{
            width: 47%;
            height: 300rpx;
            margin-bottom: 10rpx;
            dt{
                img{
                    width: 100%;
                    height: 200rpx;
                    border-radius: 10rpx;
                }
            }
            dd{
                width: 100%;
                height: 40rpx;
                line-height: 40rpx;
                p{
                    font-size: 32rpx;
                }
                span{
                    font-size: 24rpx;
                    color: #ccc;
                }
            }
        }
    }
}
</style>